<!-- 全局分页组件 -->
<template>
	<div :class="{ hidden: hidden }" class="pagination-container">
		<el-pagination
			:background="background"
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:layout="layout"
			:page-sizes="pageSizes"
			:pager-count="pagerCount"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:disabled="disabled"
		/>
	</div>
</template>
<!-- 
**
background: 设置背景颜色
current-page: 设置当前的页码
page-size: 设置每页显示条目的个数
layout: 设置分页的布局 total, prev, pager, jumper
page-sizes: 设置每页显示个数选择器的选项 [10, 20, 30, 40, 50, 100]
pager-count: 设置最大页码按钮数
total: 总条目数
size-change: page-size 改变时触发的事件
current-change: current-page 改变时触发的事件
**
 -->
<script setup>
import { scrollTo } from '@/utils/scroll-to'

const props = defineProps({
	// 总数
	total: {
		required: true,
		type: Number
	},
	// 当前页码
	page: {
		type: Number,
		default: 1
	},
	// 限制每页显示条目个数
	limit: {
		type: Number,
		default: 20
	},
	// 设置每页显示个数选择器的选项
	pageSizes: {
		type: Array,
		default() {
			return [20, 30, 50, 100]
		}
	},
	// 设置最大页码按钮数, 移动端页码按钮的数量端默认值5
	pagerCount: {
		type: Number,
		default: document.body.clientWidth < 992 ? 5 : 7
	},
	// 分页的布局
	layout: {
		type: String,
		default: 'prev, pager, next, sizes, jumper, total'
	},
	//分页背景颜色
	background: {
		type: Boolean,
		default: true
	},
	autoScroll: {
		type: Boolean,
		default: true
	},
	hidden: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits()
// 改变当前页
const currentPage = computed({
	get() {
		return props.page
	},
	set(val) {
		emit('update:page', val)
	}
})
// 改变每页显示条目个数
const pageSize = computed({
	get() {
		return props.limit
	},
	set(val) {
		emit('update:limit', val)
	}
})
// 改变每页显示条目个数
function handleSizeChange(val) {
	if (currentPage.value * val > props.total) {
		currentPage.value = 1
	}
	emit('pagination', { page: currentPage.value, limit: val })
	if (props.autoScroll) {
		scrollTo(0, 800)
	}
}

// 改变当前页
function handleCurrentChange(val) {
	emit('pagination', { page: val, limit: pageSize.value })
	if (props.autoScroll) {
		scrollTo(0, 800)
	}
}
</script>

<style lang="scss" scoped>
.pagination-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 20px;
	height: 60px;
	.el-pagination {
		margin-right: 20px;
	}
}
.pagination-container.hidden {
	display: none;
}
// 当前页
// ::v-deep(.el-pagination.is-background .el-pager li.is-active) {
// 	background-color: #265bae !important;
// 	color: #fff !important;
// }
// 每个li
// ::v-deep(.el-pagination.is-background .el-pager li) {
// 	background-color: #f1f5fb;
// 	color: #7a828e;
// }
// // 每个li-hover时
// ::v-deep(.el-pagination.is-background .el-pager li:hover) {
// 	// color: #265bae;
// 	background-color: pink;
// }
// size
::v-deep(.el-input__wrapper) {
	background-color: #f1f5fb;
}
// 左右按钮
// ::v-deep(button) {
// 	background-color: #f1f5fb !important;
// }
</style>
